<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<%@include file="../../common/header-assets.jsp"%>
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="content-page">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <h4 class="page-title float-left font-16">在线率</h4>

                        <ol class="breadcrumb float-right">
                            <li class="breadcrumb-item">数据管理</li>
                            <li class="breadcrumb-item active">在线率</li>
                        </ol>

                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="card-box">
                <div class="row">
                    <div class="col-12">
                        <div class="row">
                            <div class="col-md-11">
                                <form class="form-inline">
                                    <div class="form-group col-md-3">
                                        <label for="s_provinceCode" class="col-md-4 col-form-label">省份</label>
                                        <div class="col-md-8">
                                            <select class="form-control select2" id="s_provinceCode" name="s_provinceCode" required>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label for="s_cityCode" class="col-md-4 col-form-label">地级市</label>
                                        <div class="col-md-8">
                                            <select class="select2 form-control select2-multiple" id="s_cityCode" name="s_cityCode" required>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label for="s_areaCode" class="col-md-4 col-form-label">县区</label>
                                        <div class="col-md-8">
                                            <select class="select2 form-control" id="s_areaCode" name="s_areaCode" required>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label for="s_hiddenPointId" class="col-md-4 col-form-label">隐患点</label>
                                        <div class="col-md-8">
                                            <select class="select2 form-control" id="s_hiddenPointId" name="s_hiddenPointId" required>
                                            </select>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="col-md-1">
                                <button type="button" id="search" class="btn btn-gradient waves-light waves-effect w-xs">查询</button>
                            </div>
                        </div>
                    </div>
                </div>
                <hr >
                <div class="row">
                    <div class="col-sm-12">
                        <table id="datagrid" class="easyui-datagrid" style="height:auto;"
                               rownumbers="true" fitColumns="true" singleSelect="true"
                               data-options="url:'', pagination:true,pageSize:10,pageList:[10]">
                            <thead>
                                <tr>
                                    <th data-options="field:'provinceName', align:'center', width:120, formatter: showName">省份</th>
                                    <th data-options="field:'cityName', align:'center', width:120, formatter: showName">地级市</th>
                                    <th data-options="field:'areaName', align:'center', width:120, formatter: showName">县区</th>
                                    <th data-options="field:'hiddenPointName', align:'center', width:120, formatter: showName">隐患点</th>
                                    <th data-options="field:'onlineDeviceCount', align:'center', width:120, formatter: showName">在线数量</th>
                                    <th data-options="field:'offlineDeviceCount', align:'center', width:120, formatter: showName">离线数量</th>
                                    <th data-options="field:'deviceTotal', align:'center', width:120, formatter: showName">总数量</th>
                                    <th data-options="field:'onlineRate', align:'center', width:120">在线率</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function(){
        //初始化查询条件
        initQueryCondi();
        //初始化多选下拉列表
        $(".select2").select2();
    });

    //初始化查询条件
    let initQueryCondi = () =>{
        getDataByAjax("<c:url value='device/queryAll'></c:url>", "post", null, "json", {"dataType": "level"});
    }

    //回调函数
    var ajaxCallBack = (data, extraData) =>{
        if(extraData.dataType === "level"){
            levelData = data.obj;
            let pValue;
            //加载省份数据
            dealWithData(levelData, new Param("s_provinceCode", "provinceCode", "provinceName", null, null, null, true));
            //加载地级市数据
            pValue = $("#s_provinceCode").val()? new Array($("#s_provinceCode").val()) : selOptValToArr("s_provinceCode");
            dealWithData(levelData, new Param("s_cityCode", "cityCode", "cityName", "provinceCode", pValue, null, true));
            //加载县区数据
            pValue = $("#s_cityCode").val()? new Array($("#s_cityCode").val()) : selOptValToArr("s_cityCode");
            dealWithData(levelData, new Param("s_areaCode", "areaCode", "areaName", "cityCode", pValue, null, true));
            //加载隐患点数据
            pValue = $("#s_areaCode").val()? new Array($("#s_areaCode").val()) : selOptValToArr("s_areaCode");
            dealWithData(levelData, new Param("s_hiddenPointId", "hiddenPointId", "hiddenPointName", "areaCode", pValue, null, true));

            //加载监测点数据
            refreshContent();
        }
    }

    //省份下拉框改变事件
    $("#s_provinceCode").change(function () {
        let id = "s_cityCode";
        let pValue = $("#s_provinceCode").val()? new Array($("#s_provinceCode").val()) : selOptValToArr("s_provinceCode");
        //加载地级市
        dealWithData(levelData, new Param(id, "cityCode", "cityName", "provinceCode", pValue, null, true));
        $("#s_cityCode").change();
    });

    //地级市下拉框改变事件
    $("#s_cityCode").change(function () {
        let id = "s_areaCode";
        let pValue = $("#s_cityCode").val()? new Array($("#s_cityCode").val()) : selOptValToArr("s_cityCode");
        //加载县区
        dealWithData(levelData, new Param(id, "areaCode", "areaName", "cityCode", pValue, null, true));
        $("#s_areaCode").change();
    });

    //县区下拉框改变事件
    $("#s_areaCode").change(function () {
        let id = "s_hiddenPointId";
        let pValue = $("#s_areaCode").val()? new Array($("#s_areaCode").val()) : selOptValToArr("s_areaCode");
        //加载隐患点
        dealWithData(levelData, new Param(id, "hiddenPointId", "hiddenPointName", "areaCode", pValue, null, true));
        $("#s_hiddenPointId").change();
    });

    //搜索
    $("#search").click(function(){
        refreshContent();
    });

    let refreshContent = () =>{
        let provinceCode = $("#s_provinceCode").val();
        let cityCode = $("#s_cityCode").val();
        let areaCode = $("#s_areaCode").val();
        let hiddenPointId = $("#s_hiddenPointId").val();
        $("#datagrid").datagrid({
            url:"<c:url value='/statistics/onlineRate/query'/>",
            queryParams: {
                provinceCode,
                cityCode,
                areaCode,
                hiddenPointId
            }
        });
    }

    //显示多级主体名称
    let showName = value =>{
        let str = "";
        if(value){
            str = value;
        }else{
            str = "-"
        }
        return str;
    }
</script>